<template>
  <div class="Thermostat">
    <el-card>
      <el-button type="primary" @click="goBack">返回</el-button>
      <el-button style="margin:20px 0" @click="showThermostat"
        >添加参数</el-button
      >
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="id" label="id" width="80"></el-table-column>
        <el-table-column prop="position" label="参数位置"></el-table-column>
        <el-table-column prop="name" label="菜单名称"></el-table-column>
        <el-table-column
          prop="describe"
          label="菜单描述"
          width="300"
        ></el-table-column>
        <el-table-column prop="default" label="默认值"></el-table-column>
        <el-table-column prop="defaultType" label="默认值类型">
          <template slot-scope="scoped">
            <div>
              <el-tag v-if="scoped.row.defaultType == 1">温度型</el-tag>
              <el-tag v-else-if="scoped.row.defaultType == 2" type="danger"
                >非温度型</el-tag
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="参数值类型" width="100">
          <template slot-scope="scoped">
            <div>
              <el-tag v-if="scoped.row.type == 1" type="warning">范围性</el-tag>
              <el-tag v-else-if="scoped.row.type == 2" type="success"
                >固定值型</el-tag
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="value"
          label="设定范围值"
          width="100"
        ></el-table-column>
        <el-table-column prop="company" label="单位"></el-table-column>
        <el-table-column
          prop="add_time"
          label="添加时间"
          width="250"
        ></el-table-column>
        <el-table-column prop="company" label="操作" fixed="right" width="250">
          <template slot-scope="scoped">
            <div>
              <el-button
                type="primary"
                size="small"
                @click="showEdit(scoped.row)"
                >编辑</el-button
              >
              <el-button
                type="danger"
                size="small"
                @click="handlerDel(scoped.row.id, scoped.row.position)"
                >删除</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination" style="margin-bottom:20px;">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[58]"
          :page-size="ThermostatQuery.pageSize"
          :current-page="ThermostatQuery.pageNumber"
          layout="total, sizes, prev, pager, next, jumper"
          :total="count"
        ></el-pagination>

        <!-- 弹框 -->
        <el-dialog
          :title="titleName"
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="handleClose"
        >
          <el-form
            :model="ruleForm"
            ref="form"
            :rules="formRules"
            label-width="110px"
          >
            <el-form-item label="参数位置 :" prop="position">
              <el-input
                v-model="ruleForm.position"
                placeholder="请输入参数位置"
              ></el-input>
            </el-form-item>
            <el-form-item label="菜单名称 :" prop="name">
              <el-input
                v-model="ruleForm.name"
                placeholder="请输入菜单名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="菜单描述 :" prop="describe">
              <el-input
                v-model="ruleForm.describe"
                placeholder="请输入菜单描述"
              ></el-input>
            </el-form-item>
            <el-form-item label="参数值类型 : " prop="type">
              <el-select v-model="ruleForm.type" placeholder="请选择参数类型">
                <el-option
                  v-for="item in typeList"
                  :label="item.name"
                  :value="item.type"
                  :key="item.type"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="参数上限值 :" prop="upvalue">
              <el-input
                v-model="ruleForm.upvalue"
                placeholder="请输入参数上限值"
              ></el-input>
            </el-form-item>
            <el-form-item label="参数下限值 :" prop="downvalue">
              <el-input
                v-model="ruleForm.downvalue"
                placeholder="请输入参数下限值"
              ></el-input>
            </el-form-item>
            <el-form-item label="默认值类型:" prop="defaultType">
              <el-select
                v-model="ruleForm.defaultType"
                placeholder="请选择参数类型"
              >
                <el-option
                  v-for="item in defaultTypeList"
                  :label="item.name"
                  :value="item.defaultType"
                  :key="item.defaultType"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="默认值 :" prop="default">
              <el-input
                v-model="ruleForm.default"
                placeholder="请输入默认值"
              ></el-input>
            </el-form-item>

            <el-form-item label="单位 :" prop="company">
              <el-input
                v-model="ruleForm.company"
                placeholder="请输入单位"
              ></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="handlerSure">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </el-card>
  </div>
</template>

<script>
import {
  thermostatList,
  thermostatAdd,
  thermostatUpdate,
  thermostatDel
} from "../../utils/api";
import { mapState, mapGetters } from "vuex";

export default {
  data() {
    return {
      // 参数数据
      tableData: [],
      // 分页数据
      ThermostatQuery: {
        pageSize: 100,
        pageNumber: 1,
        formworkId: ""
      },
      // 参数总条数
      count: 0,
      // 参数的弹框
      dialogVisible: false,
      // 参数类型数据
      typeList: [
        {
          type: 1,
          name: "范围型"
        },
        {
          type: 2,
          name: "固定值型"
        }
      ],
      // 默认值类型
      defaultTypeList: [
        {
          defaultType: 1,
          name: "温度型"
        },
        {
          defaultType: 2,
          name: "非温度型"
        }
      ],
      // 表单
      ruleForm: {
        userId: "",
        position: "",
        name: "",
        describe: "",
        type: "",
        company: "",
        default: "",
        upvalue: "",
        downvalue: "",
        value: "",
        id: "",
        formworkId: "",
        defaultType: "",
        companyId: ""
      },
      formRules: {
        position: [
          { required: true, message: "请输入参数位置", trigger: "change" }
        ],
        name: [
          { required: true, message: "请输入菜单名称", trigger: "change" }
        ],
        describe: [
          { required: true, message: "请输入菜单描述", trigger: "change" }
        ],
        type: [
          { required: true, message: "请选择参数值类型", trigger: "change" }
        ],
        company: [{ required: true, message: "请输入单位", trigger: "change" }],
        default: [
          { required: true, message: "请输入默认值", trigger: "change" }
        ],
        upvalue: [
          { required: true, message: "请输入参数上限值 ", trigger: "change" }
        ],
        downvalue: [
          { required: true, message: "请输入参数下限值 ", trigger: "change" }
        ],
        defaultType: [
          { required: true, message: "请输入参数值类型 ", trigger: "change" }
        ]
      },
      titleName: "添加参数"
    };
  },
  computed: {
    ...mapState(["org_id"])
  },
  watch: {
    org_id(val) {
      this.getThermostat();
      if (val === window.sessionStorage.getItem("companyId")) {
      } else {
        this.$router.push("/TemplateList");
      }
    }
  },
  created() {
    this.getThermostat();
  },
  methods: {
    goBack() {
      this.$store.dispatch("delVisitedViews", this.$route).then(obj => {
        this.$router.push("/TemplateList");
      });
      window.sessionStorage.removeItem("formworkid");
    },
    // 获取参数列表
    getThermostat() {
      const params = {
        pageNumber: this.ThermostatQuery.pageNumber,
        pageSize: this.ThermostatQuery.pageSize,
        formworkId: window.sessionStorage.getItem("formworkid")
      };
      this.postRequest(thermostatList, params).then(res => {
        if (res.code == 200) {
          this.tableData = res.data.data;
          this.count = res.data.count;
        }
      });
    },
    // 点击添加参数显示弹框
    showThermostat() {
      this.dialogVisible = !this.dialogVisible;
    },
    // 点击编辑显示弹框
    showEdit(data) {
      this.dialogVisible = !this.dialogVisible;
      this.$nextTick(() => {
        this.ruleForm.id = data.id;
        this.ruleForm.position = data.position;
        this.ruleForm.name = data.name;
        this.ruleForm.describe = data.describe;
        // this.ruleForm.type = data.type == 1 ? "范围型" : "固定值型";
        this.ruleForm.type = Number(data.type);
        this.ruleForm.defaultType = data.defaultType;
        this.ruleForm.company = data.company;
        this.ruleForm.default = data.default;
        this.ruleForm.upvalue = data.value.split(",")[0];
        this.ruleForm.downvalue = data.value.split(",")[1];
        this.ruleForm.id = data.id;
        this.titleName = "编辑参数";
      });
    },
    // 点击确定
    handlerSure() {
      this.$refs.form.validate(valid => {
        if (!valid) return this.$message.error("请填写完整");
        if (this.titleName == "添加参数") {
          this.handlerAdd();
        } else if (this.titleName == "编辑参数") {
          this.handlerEdit();
        }
      });
    },
    // 封装一个添加的方法
    handlerAdd() {
      this.titleName = "添加参数";
      this.ruleForm.userId = window.sessionStorage.getItem("userId");
      this.ruleForm.formworkId = window.sessionStorage.getItem("formworkid");
      this.ruleForm.companyId = this.org_id;
      this.ruleForm.value =
        this.ruleForm.upvalue + "," + this.ruleForm.downvalue;
      this.postRequest(thermostatAdd, this.ruleForm).then(res => {
        if (res.code == 200) {
          this.$message.success("添加参数成功");
          this.dialogVisible = false;
          this.getThermostat();
        }
      });
    },
    // 封装一个编辑的方法
    handlerEdit() {
      this.ruleForm.userId = window.sessionStorage.getItem("userId");
      this.ruleForm.formworkId = window.sessionStorage.getItem("formworkid");
      this.ruleForm.value =
        this.ruleForm.upvalue + "," + this.ruleForm.downvalue;
      this.postRequest(thermostatUpdate, this.ruleForm).then(res => {
        if (res.code == 200) {
          this.$message.success("修改参数成功");
          this.dialogVisible = false;
          this.getThermostat();
        }
      });
    },
    // 删除参数
    handlerDel(id, position) {
      const params = {
        id: id,
        position: position,
        userId: window.sessionStorage.getItem("userId")
      };
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.postRequest(thermostatDel, params).then(res => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.getThermostat();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    handleClose() {
      this.$refs.form.resetFields();
      this.dialogVisible = false;
    },
    // 分页
    handleSizeChange(val) {
      this.ThermostatQuery.pageSize = val;
      this.getThermostat();
    },
    handleCurrentChange(val) {
      this.ThermostatQuery.pageNumber = val;
      this.getThermostat();
    }
  }
};
</script>

<style></style>
